import { ref, reactive, computed } from 'vue';
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { DispatchResult, pageHelper, objectFrom } from '../../../tools/index'
import { buildColumns, buildFields } from '../../../common/data/index'

import Api from '../../../components/tools/api'
import Message from '../../../components/message/index'

// 管理页面
export default (layoutName: string, context?: any) => {
  const router = useRouter()
  const store = useStore()

  const dataStore = {
    name: '',
    list: [],
  }
  const pageStore = new pageHelper()

  const backAction = () => router.back()
  const barData = computed(() => ({ name: dataStore.name }))
  const columns = computed(() => {
    const columns = buildColumns(layoutName, { context, store })

    const docEl = document.documentElement
    const size = docEl.style.fontSize
    let width = 200
    if (typeof size === 'string') {
      const value = Number(size.split('px')[0])
      if (value > 0) {
        width = 78 + value * 4
      }
    }
    columns.push({
      label: '操作',
      type: 'operation',
      width,
      items: [
        {
          text: '修改',
          key: 'edit',
          click: (row: any) => editItem(row.id)
        },
        {
          text: '删除',
          key: 'delete',
          click: (row: any) => deleteItem(row.id)
        }
      ]
    })
    return columns
  })
  const fields = computed(() => buildFields(layoutName))
  const extra = computed(() => {
    return [
      {
        props: {},
        label: '新建',
        onClick: () => {
          router.push(`/data/${layoutName}/form`)
        }
      },
      {
        props: {},
        label: '导入',
        onClick: () => uploadItem()
      }
    ]
  })

  const findPage = async () => {
    try {
      const params = objectFrom(barData.value, pageStore.data())
      const result = await Api.send(`/${layoutName}/findPage`, params)
      DispatchResult(result, {
        onSuccess: (data: any) => {
          const { items } = data
          pageStore.set(data)
          dataStore.list = items
        },
        onError: (data: any, message: string) => {
          Message({ message, type: 'error' })
        }
      })
    } catch (error) {
      console.log(error)
    }
  }

  const init = async () => {
    await findPage()
  }

  const editItem = (id: any) => {
    router.push(`/data/${layoutName}/form/${id}`)
  }

  const deleteItem = async (id: any) => {
    try {
      const params = { ids: [id] }
      const result = await Api.send(`/${layoutName}/delete`, params)
      DispatchResult(result, {
        onSuccess: (data: any, message: string) => {
          findPage()
          Message({ message, type: 'success' })
        },
        onError: (data: any, message: string) => {
          Message({ message, type: 'error' })
        }
      })
    } catch (error) {
      console.log(error)
    }
  }

  const uploadItem = () => { }

  return {
    dataStore,
    pageStore,
    barData,
    columns,
    fields,
    extra,
    backAction,
    init
  }
}
